<template>
	<div>
		<div class="topNav">
			<div>
				<el-input placeholder="请输入内容" v-model="search">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input>
			</div>
			<el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">新建预定</el-button>
			<el-button type="danger">删除预定</el-button>
		</div>

		<div v-for="n in 3" :key="n">
			<el-col :span="4">
				<div class="status">预定中</div>
				<el-card shadow="always">
					<div class="num">
						3人
						<div>15:00</div>
					</div>

					<div class="taberNum">
						1号桌·四人桌
					</div>
				</el-card>
			</el-col>
		</div>

		<el-dialog title="| 新建排号" :visible.sync="dialogVisible" width="50%">
			<div class="our-info">
				<div class="name">预定类型</div>
				<el-select v-model="select" slot="prepend" placeholder="请选择">
					<el-option label="预定中" value="1"></el-option>
					<el-option label="预定成功" value="2"></el-option>
					<el-option label="已完成" value="3"></el-option>
				</el-select>
			</div>
			<div class="our-info">
				<div class="name">客人名称</div>
				<input type="text" />
			</div>
			<div class="our-info">
				<div class="name">联系电话</div>
				<input type="text" />
			</div>
			<div class="our-info">
				<div class="name">预约到达时间</div>
				<el-date-picker v-model="arrival" type="datetime" placeholder="选择日期时间"> </el-date-picker>
			</div>
			<div class="our-info">
				<div class="name">客人人数</div>
				<input type="text" />
			</div>
			<div class="our-info">
				<div class="name">预定押金</div>
				<input type="text" />
			</div>
			<div class="our-info">
				<div class="name">客户留言</div>
				<input type="text" />
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" @click="dialogVisible = false">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
export default {
	data() {
		return {
			dialogVisible: false,
			search: '',
			arrival: '',
            select:'',
		};
	},

	methods: {},
};
</script>

<style lang="scss" scoped>
.topNav {
	display: flex;
	margin-bottom: 20px;
	div {
		margin-right: 20px;
	}
}

.el-card {
	margin-right: 20px;
}

.status {
	text-align: center;
	margin-right: 20px;
	background: rgb(82, 233, 115);
	height: 30px;
	line-height: 30px;
	border-top-left-radius: 5px;
	border-top-right-radius: 5px;
}

.num {
	height: 60px;
	text-align: center;
	font-size: 28px;
	color: rgb(66, 148, 255);
	div {
		font-size: 16px;
		color: red;
	}
}

.taberNum {
	color: rgba(0, 0, 0, 0.562);
	text-align: center;
	font-size: 10px;
}

.el-input--prefix .el-input__inner {
	margin-left: 10px;
}

.our-info {
	display: flex;
	margin-bottom: 20px;
	.name {
		width: 85px;
		height: 30px;
		line-height: 30px;
		text-align: right;
	}
	div {
		margin-left: 10px;
	}
	input {
		margin-left: 10px;
		height: 40px;
		line-height: 40px;
		width: 220px;
		border-radius: 5px;
		border: 1px solid #ccc;
	}
}

.el-dialog__header {
	color: rgb(50, 68, 119) !important;
}
</style>
